<template>
	<view class="detail">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<view class="swiper-item">
					<image class="swiper-img" :src="item.imgUrl" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 价格和名称 -->
		<view class="detail-goods">
			<view class="goods-nprice">￥19.00</view>
			<view class="goods-oprice">原价：￥25.00</view>
			<view class="goods-name">【自营】最新版钢笔款2023年必须买，不买你就不行了,爆款直售！</view>
		</view>
		<!-- 商品详情图 -->
		<view class="detail-detail">
			<view>
				<image class="detail-img"
					src="https://img.alicdn.com/imgextra/i4/2207822398874/O1CN01ZGyk5L2FQLONshWej_!!2207822398874.jpg"
					mode=""></image>
			</view>
			<view>
				<image class="detail-img"
					src="https://img.alicdn.com/imgextra/i3/2207822398874/O1CN01iHcOPH2FQLOQ1t88F_!!2207822398874.jpg"
					mode=""></image>
			</view>
			<view>
				<image class="detail-img"
					src="https://img.alicdn.com/imgextra/i4/2207822398874/O1CN01E9HctT2FQLOQ1v0WB_!!2207822398874.jpg"
					mode=""></image>
			</view>
			<view>
				<image class="detail-img"
					src="https://img.alicdn.com/imgextra/i2/2207822398874/O1CN01SuhIJP2FQLOTGSNVl_!!2207822398874.jpg"
					mode=""></image>
			</view>
			<view>
				<image class="detail-img"
					src="https://img.alicdn.com/imgextra/i3/2207822398874/O1CN01VVmrjX2FQLOSKefr7_!!2207822398874.jpg"
					mode=""></image>
			</view>
			<view>
				<image class="detail-img"
					src="https://img.alicdn.com/imgextra/i4/2207822398874/O1CN01H1TFpM2FQLOSKe8aX_!!2207822398874.jpg"
					mode=""></image>
			</view>
			<view>
				<image class="detail-img"
					src="https://gw.alicdn.com/tfs/TB1d0h2qVYqK1RjSZLeXXbXppXa-1125-960.png?getAvatar=avatar" mode="">
				</image>
			</view>
		</view>
		<Card cardTitle="看了又看"></Card>
		<Goodslist :dataList="dataList"></Goodslist>

		<!-- 底部 -->
		<view class="detail-footer">
			<view class="">
				<image class="footer-icon" src="../../static/message_footer.png" mode=""></image>
			</view>
			<view class="">
				<image class="footer-icon" src="../../static/cart_footer.png" mode=""></image>
			</view>
			<view class="add-shopcart" @tap='showTop'>加入购物车</view>
			<view class="purchase" @tap='showTop'>立即购买</view>
		</view>

		<!-- 底部弹出层 -->
		<view class="pop" v-show="isShow" @touchmove.stop.prevent="">
			<!-- 蒙层 -->
			<view class="pop-mask" @tap="hidePop()"></view>
			<!-- 内容块 -->
			<view class="pop-content" :animation="animationData">
				<view class="">
					<image class="pop-img"
						src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRstpXFkFzqgSliKFa1a_gWMkMy7IdI8f1TKw&usqp=CAU"
						mode=""></image>
				</view>
				<view class="number u-flex">
					<view class="pop-number">购买数量</view>
					<u-number-box v-model="value" @change="valChange"></u-number-box>
				</view>
				<view class="pop-sub">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Card from "../../components/index/Card.vue"
	import Goodslist from '../../components/common/Goodslist.vue'
	export default {
		components: {
			Card,
			Goodslist
		},
		data() {
			return {
				isShow: false,
				clientHeight: 0,
				value: 0,
				dataList: [],
				animationData: {},
				"swiperList": [{
						"imgUrl": "https://img.alicdn.com/bao/uploaded/O1CN01zqNpQ21JPCh54GcwU_!!6000000001020-0-yinhe.jpg"
					},
					{
						"imgUrl": "https://img.alicdn.com/bao/uploaded/O1CN01OOQurG1zkvOPmCWzi_!!6000000006753-0-yinhe.jpg"
					},
					{
						"imgUrl": "https://img.alicdn.com/bao/uploaded/O1CN01N9sqYt1qxu2wKO6ac_!!6000000005563-0-yinhe.jpg"
					}
				],
				"imglist": [{
						"id": 4,
						"name": '最新版钢笔款2023年必须买，不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就亏本了，爆款直售，走过路过不要错过！',
						"newprice": 128,
						"oldprice": 98,
						"discount": 5.2,
						"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRP0k1O6spa8DBYQfHT5MkVljGIKU8NVpIXKg&usqp=CAU",
					},
					{
						"id": 5,
						"name": '最新版钢笔款2023年必须买，不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就亏本了，爆款直售，走过路过不要错过！',
						"newprice": 128,
						"oldprice": 98,
						"discount": '5.2',
						"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSkxP6Cpwxekgyu16FirzoLeFM-hsOr-MUH5Q&usqp=CAU",
					},
					{
						"id": 6,
						"name": '最新版钢笔款2023年必须买，不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就亏本了，爆款直售，走过路过不要错过！',
						"newprice": 128,
						"oldprice": 98,
						"discount": '5.2',
						"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZHTs8_zvcAJG8ctoGGZcT8kTIercadOMcqQ&usqp=CAU",
					},
					{
						"id": 7,
						"name": '最新版钢笔款2023年必须买，不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就亏本了，爆款直售，走过路过不要错过！',
						"newprice": 128,
						"oldprice": 98,
						"discount": '5.2',
						"image": "https://img2.baidu.com/it/u=1429742129,3388883706&fm=253&fmt=auto&app=138&f=JPEG?w=692&h=500",
					},
					{
						"id": 8,
						"name": '最新版钢笔款2023年必须买，不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就亏本了，爆款直售，走过路过不要错过！',
						"newprice": 128,
						"oldprice": 98,
						"discount": '5.2',
						"image": "http://img30.360buyimg.com/popWareDetail/jfs/t1/157113/2/18133/155596/60700a98E7477c3f2/0abc30951c082385.jpg"
					},
					{
						"id": 9,
						"name": '最新版钢笔款2023年必须买，不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就亏本了，爆款直售，走过路过不要错过！',
						"newprice": 128,
						"oldprice": 98,
						"discount": '5.2',
						"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1JWZ80M3_N-MaUW75SQYJUynMhzK_6nPcgA&usqp=CAU"
					},
					{
						"id": 10,
						"name": '最新版钢笔款2023年必须买，不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就亏本了，爆款直售，走过路过不要错过！',
						"newprice": 128,
						"oldprice": 98,
						"discount": '5.2',
						"image": "https://img2.baidu.com/it/u=2617685468,2154034022&fm=253&fmt=auto&app=138&f=JPEG?w=642&h=500"
					},
					{
						// 这里图片不存在，会加载失败，显示错误的占位图
						"id": 11,
						"name": '最新版钢笔款2023年必须买，不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就亏本了，爆款直售，走过路过不要错过！',
						"newprice": 128,
						"oldprice": 98,
						"discount": '5.2',
						"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDHW_fbXKderQskwimZabpMiwT5Q1GMUw_WA&usqp=CAU",
					},
					{
						"id": 12,
						"name": '最新版钢笔款2023年必须买，不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就亏本了，爆款直售，走过路过不要错过！',
						"newprice": 128,
						"oldprice": 98,
						"discount": '5.2',
						"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTc5kEHFBzyqC41xKvOUwaMEaqp1bn-ywW7A&usqp=CAU"
					},
					{
						"id": 13,
						"name": '最新版钢笔款2023年必须买，不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就亏本了，爆款直售，走过路过不要错过！',
						"newprice": 128,
						"oldprice": 98,
						"discount": '5.2',
						"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQPZuozypl5cKmVSDZTOJHiirpMqZ5_nyV-rw&usqp=CAU"
					}
				],
			}
		},
		onBackPress() {
			console.log(1111111);
		},
		//点击分享
		onNavigationBarButtonTap(e) {
			if ((e.type === "share")) {
				console.log('分享');
				// uni.share({
				// 	"provider:":"weixin",
				// 	"type:":0,  //图文分享
				// 	// "title:":this.imglist.name,   //数据的标题，
				// 	// "href:":"xxxxxx/id="+this.imglist.id+"", //要进入的链接
				// 	// "imageUrl:":"",
				// 	success: (res) => {
				// 		// console.log('成功');
				// 		uni.showTabBar({
				// 			title:"分享成功"
				// 		})
				// 		// console.log("success:"+JSON.stringify(res));
				// 	},
				// 	fail: (err) => {
				// 		console.log("失败");
				// 		// console.log("fail:"+JSON.stringify(err));
				// 	}
				// })
			}
		},
		methods: {
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			showTop() {
				var animation = uni.createAnimation({
					duration: 200,
				})
				animation.translateY(600).step()
				this.animationData = animation.export()
				this.isShow = true
				setTimeout(() => {
					animation.translateY(0).step()
					this.animationData = animation.export()
				}, 200)
			},
			hidePop() {
				var animation = uni.createAnimation({
					duration: 200,
				})
				animation.translateY(600).step()
				this.animationData = animation.export()
				this.isShow = true
				setTimeout(() => {
					animation.translateY(0).step()
					this.isShow = false
				}, 200)
			}
		}
	}
</script>

<style lang="scss" scoped>
	swiper {
		width: 100%;
		height: 500rpx;

		.swiper-img {
			width: 100%;
			height: 600rpx;
		}
	}

	.detail {
		padding-bottom: 90rpx;

		.detail-goods {
			text-align: center;
			padding: 10rpx 0;

			.goods-nprice {
				text-align: center;
				padding: 20rpx;
				color: #f5a300;
				font-weight: bold;
				font-size: 36rpx;
			}

			.goods-name {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				color: #333333;
				word-break: break-all;
				padding: 8rpx 60rpx;
				font-weight: bold;
				font-size: 34rpx;
			}

			.goods-oprice {
				text-align: center;
				padding-bottom: 20rpx;
				font-weight: normal;
				text-decoration: line-through;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.detail-detail {
			width: 100%;

			.detail-img {
				width: 100%;
				height: 800rpx;
			}
		}

		.detail-footer {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;

			.footer-icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 100%;
				background-color: #b3b3b3;
				color: #fff;
				margin: 0 10rpx;
			}

			.add-shopcart {
				margin: 0 40rpx;
				width: 200rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				background-color: #b3b3b3;
				color: #fff;
				border-radius: 40rpx;
			}

			.purchase {
				width: 200rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				background-color: #f5a300;
				color: #fff;
				border-radius: 40rpx;
			}
		}
	}

	.pop {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;

		.pop-mask {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
		}

		.pop-content {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 700rpx;
			background-color: #fff;
		}

		.pop-img {
			width: 260rpx;
			height: 260rpx;
		}

		.pop-sub {
			line-height: 80rpx;
			background-color: #f5a300;
			color: #fff;
			text-align: center;
		}

		.number {
			margin-bottom: 40rpx;

			.pop-number {
				padding: 20rpx;
				margin-right: 380rpx;
			}
		}
	}
</style>
